<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>DOM事件处理</h2>
    <p>采用给标签（DOM对象）绑定事件处理函数的方式来完成事件处理</p>
    <p>这种思路，是观察者设计模式</p>
    <h2>绑定事件处理函数的三种方式</h2>
    <ul>
        <li>DOM标签使用 onXXX属性="函数名()"</li>
        <li>DOM对象使用 onXXX属性 = 函数 </li>
        <li>DOM对象使用 addEventListener("事件名",函数）</li>
    </ul>
    <hr>
    <button onclick="handleClick()">点击我（第一种方式）</button>
    <button class="btn1">点击我（第二种方式）</button>
    <button class="btn2">点击我（第三种方式）</button>
</body>
<script>
    function handleClick() {
        alert("我被点击了！");
    }

    let btn1 = document.querySelector(".btn1");
    btn1.onclick = handleClick;

    let btn2 = document.querySelector(".btn2");
    btn2.addEventListener("click",handleClick);
</script>
</html>